import React, { useEffect, useState } from 'react'
import { usePlugins, useAmap } from '@amap/amap-react'
function useComponent(init: any, plugins: any) {
    const [component, set] = useState(null)
    const AMap = usePlugins(plugins)
    const map = useAmap()
    useEffect(() => {
        if (map && AMap) {
            const target = init(AMap, map)
            set(target)
            return () => {
                target.setMap(null)
                set(null)
            }
        }
    }, [map, AMap])
    return component
}
export const HeatMap = (props: any) => {
    const heatmap: any = useComponent(
        (AMap: any, map: any) =>
            new AMap.HeatMap(map, {
                radius: 25,
                opacity: [0, 0.8],
            }),
        'AMap.HeatMap',
    )
    const { data, max } = props
    useEffect(() => {
        if (heatmap) {
            heatmap.setDataSet({
                data,
                max,
            })
            console.log('set data')
        }
    }, [heatmap, data, max])
    return null
}
